<template>
	<view :data-theme="theme" class="container">
		<view class="print_header">

			<view class="header_card">
				<view class="header-title" style="display: flex;justify-content: space-between;">
					<view style="font-weight: bold;font-size: 15px;">本周备货产能</view>
					<view @click="changeUpdate" class="main_color">修改</view>
				</view>
				<view v-for="(elen,indexn) in visibleItems" :key="indexn">
					<uni-row class="demo-uni-row" style="font-size: 26rpx;color: #717171;padding: 20rpx 0;">
						<uni-col :span="7">
							<view class="demo-uni-col dark" style="color: #000;">{{elen.businessName}}</view>
						</uni-col>
						<uni-col :span="9">
							<view>今日预测 <span style="margin-left: 20rpx;">未开启</span></view>
						</uni-col>
						<uni-col :span="8">
							<view>今日销量 <span style="margin-left: 20rpx;">{{elen.daySales}}</span></view>
						</uni-col>
					</uni-row>
				</view>
				<!-- 展开/收起按钮 -->
				<view v-if="showExpandButton" style="color: #989898;margin-top: 10rpx;display: flex;">
					<view @click="toggleExpand">
						{{ isExpanded ? '收起所有管理城市' : '展开所有管理城市' }}
					</view>
					<view style="margin-left: 10rpx;">
						<u-icon :name="isExpanded?'arrow-up':'arrow-down'"></u-icon>
					</view>
				</view>
			</view>
			<view
				style="display: flex; flex-flow: row;justify-content: space-around;height: 40px;line-height: 40px;position: relative;">
				<picker model="selector" @change="dataClassConfirm" range-key="name" :value="dataClassIndex"
					:range="dataUpList" @cancel="cancelPicker" style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:calendarShow?bgColor:null}" @click="openDataPicker">
						<view style="font-size: 14px;margin-right: 6rpx;">
							{{dataUpList[dataClassIndex].name.slice(0, -2)}}
						</view>
						<u-icon :name="calendarShow?'arrow-up-fill':'arrow-down-fill'" size="10"
							:color="calendarShow?bgColor:''"></u-icon>
					</view>
				</picker>
				
				<view style="display: flex;flex: 1;justify-content: center;"
					:style="{color:showUpClassPopup?bgColor:null}" @click="showUpClassPopup = true">
					<view style="font-size: 14px;margin-right: 6rpx;">{{subNameValue?subNameValue:'全部类目'}}</view>
					<u-icon :name="showUpClassPopup?'arrow-up-fill':'arrow-down-fill'" size="10"
						:color="showUpClassPopup?bgColor:''"></u-icon>
				</view>

				<picker model="selector" @change="sortedStatusConfirm" :value="sortedStatusIndex" :range="sortedList"
					@cancel="cancelPicker" style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:sortedStatusShow?bgColor:null}" @click="sortedStatusShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">{{sortedList[sortedStatusIndex]}}</view>
						<u-icon :name="sortedStatusShow?'arrow-up-fill':'arrow-down-fill'" size="10"
							:color="sortedStatusShow?bgColor:''"></u-icon>
					</view>
				</picker>

				<view style="display: flex;flex: 1;justify-content: center;"
					:style="{color:showUpChoosePopup?bgColor:null}" @click="showUpChoosePopup = true">
					<view style="font-size: 14px;margin-right: 6rpx;">筛选</view>
					<u-icon :name="showUpChoosePopup?'list':'list'" size="12"
						:color="showUpChoosePopup?bgColor:''"></u-icon>
				</view>
			</view>

			<view style="margin: 24rpx 20rpx;">
				<!-- <u-search v-model="keyWord" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品名称/商品编码"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search> -->
				<u-search placeholder="请输入品牌名或商品编码查询" shape="square" bgColor="#f9f9fd" :showAction="false"
					v-model="keyword"></u-search>
			</view>
		</view>
		<view class="main_color" style="margin: 20rpx;">商品数:<text style="margin: 0 10rpx;">2</text> 销量:<text style="margin: 0 10rpx;">26</text></view>
		<!-- 备货列表信息 -->
		<scroll-view scroll-y="true" class="print_center" @scrolltolower="scrolltolowerFn">

			<page-stocking ref="tab"></page-stocking>
		</scroll-view>

		<tui-drawer mode="bottom" :visible="showUpDatePopup" @close="closeComuleDate">
			<view class="ensure">
				<view class="title"><text @click="closeComuleDate" class="iconfont icon-guanbi5"></text>修改备货产能<text
						@click="ComuleDate" class="iconfontRight">确认</text></view>
				<scroll-view scroll-y="true" show-scrollbar="true" class="scroll-Y">
					<view v-for="(item,index) in operatyCity" :key="index">
						<view style="text-align: center;display: flex;justify-content: space-between;margin: 40rpx;">
							<view>{{item.cityName}}</view>
							<view>备货产能/今日销量</view>
							<view>
								/{{item.dataSale}}
							</view>
						</view>
						<view class="drawer-card"
							style="background-color: #fff;margin: 20rpx;padding: 30rpx 20rpx;border-radius: 20rpx;">
							<view v-for="ele in item.operatyList" style="margin: 26rpx 0;">
								<view class="card_top" style="font-weight: bolder;">
									{{ele.operatyName}}
								</view>
								<uni-row class="demo-uni-row card_conter"
									style="margin: 20rpx 0;font-size: 26rpx;justify-content: center;">
									<uni-col :span="5">
										<view class="demo-uni-col dark">备货产能
										</view>
									</uni-col>
									<uni-col :span="12">
										<view class="demo-uni-col dark" style="background-color: #f8f5f8;">
											<u--input placeholder="请输入内容" border="none"
												v-model="ele.contentValue"></u--input>
										</view>
										<view class="demo-uni-col dark plain_bgColor"
											style="padding: 10rpx;border-radius: 10rpx;margin-top: 10rpx;">
											近一周该仓平均销量{{ele.totalSales}}件
										</view>
									</uni-col>
									<uni-col :span="7">
										<view class="demo-uni-col dark" style="text-align: end;">
											今日销量:{{ele.teadySales}}</view>
									</uni-col>
								</uni-row>
							</view>

						</view>
					</view>
					<view style="height: 50px;"></view>
				</scroll-view>
			</view>
		</tui-drawer>


		<!-- 类目分类 -->
		<tui-drawer mode="bottom" :visible="showUpClassPopup" @close="closeComuleDate">
			<view class="ensure">
				<view class="classTitle"><text @click="closeComuleDate" class="iconfont icon-guanbi5"></text>商品类目
					<!-- <text @click="ComuleClassValue" class="iconfontRight">确认</text> -->
				</view>
				<view class="categories">
					<!-- 左侧：一级分类 -->
					<scroll-view class="primary" scroll-y>
						<view class="item" v-for="(item,index) in categroyData" :key="index"
							@click="selectCategory(index)" :class="{ active: index === selectedCategory }">
							<text class="name">{{item.name}}</text>
						</view>
					</scroll-view>
					<!-- 右侧：二级分类 -->
					<scroll-view class="secondary" scroll-y>
						<!-- 内容区域 -->
						<view class="panel  checke_item" @click="secondaryCategory(subItem,subIndex)"
							v-for="(subItem,subIndex) in categroyData[selectedCategory].sonList" :key="subItem.id">
							<view class="item_top" style="justify-content: space-between;display: flex;margin: 20rpx;">
								<view class="item_img" :class="{ active: subIndex === secondaryIndex }">
									{{subItem.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

			</view>
		</tui-drawer>

		<!-- 右侧筛选弹窗 -->
		<tui-drawer mode="right" :visible="showUpChoosePopup" @close="closeComuleDate">
			<view class="rightPopup">
				<view class="title">更多筛选<text @click="closeComuleDate" class=" iconfont icon-guanbi5"></text></view>
				<view style="font-weight: bolder;margin: 16rpx;">
					仓库名称
				</view>
				<view style="margin: 10px 0 10px 0">
					<view class="sku-select">
						<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
							<view class="flex-text"
								:class='item.operatyName == operatyCityValue? "right-class-active" :""'
								v-for="(item,index) in operatyCityList" :key="index" @click='tapAttr(item)'>
								{{item.operatyName}}
							</view>
						</view>
					</view>
				</view>

				<view class="title-bottom"
					style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
					<view class="bottom-button">
						<button style="margin:10px ;line-height: 64rpx;font-weight: bold;" class="plain_bgColor"
							@click="resetBotton">重置</button>
					</view>
					<view class="bottom-button">
						<button class="bg_color" style="margin:10px ;line-height: 64rpx; font-weight: bold;color: #FFF;"
							@click="sureFiltrate">确认</button>
					</view>
				</view>
			</view>
		</tui-drawer>


	</view>
</template>

<script>
	import pageStocking from '../components/nuve-page-stocking.nvue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	import tuiDrawer from '../components/tui-drawer/index.vue';
	import {
		getListAllApi
	} from '@/api/category.js';
	export default {
		components: {
			pageStocking,
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				businessUnit: [{
					businessName: '北京事业部',
					daySales: 121,
				}, {
					businessName: '天津事业部',
					daySales: 11,
				}], // 你的业务数据
				visibleItemCount: 1, // 初始显示的条目数量
				isExpanded: false, // 是否展开更多内容
				keyword: '',
				dataList: [],
				range: [],
				calendarShow: false,
				// ----------------时间选则-----------------
				dataClassIndex: 1,
				dataUpList: [], // 备货日期
				tomorrowTime: '',
				todayTime: '',
				// -----------------------------------------
				invoiceClassColumns: [{
						label: '全部',
						id: 0
					}, {
						label: '普通发票',
						id: 1
					},
					{
						label: '专用发票',
						id: 2
					}
				],
				invoiceStatusColumns: [{
						label: '全部',
						id: 0
					}, {
						label: '普通发票',
						id: 1
					},
					{
						label: '专用发票',
						id: 2
					}
				],
				invoiceClassIndex: 0,
				invoiceStatusIndex: 0,
				invoiceClassShow: false,
				invoiceTypeShow: false,
				sortedStatusShow: false,
				showUpDatePopup: false, // 底部弹窗
				operatyCity: [{
					cityName: '北京事业部',
					dataSale: 12,
					operatyList: [{
						operatyName: '北京大兴仓',
						teadySales: 29,
						contentValue: null,
						totalSales: 876
					}, {
						operatyName: '北京顺义仓',
						teadySales: 30,
						contentValue: null,
						totalSales: 876
					}]
				}, {
					cityName: '天津事业部',
					dataSale: 12,
					operatyList: [{
						operatyName: '天津1仓',
						teadySales: 29,
						contentValue: null,
						totalSales: 876
					}, {
						operatyName: '天津2仓',
						teadySales: 30,
						contentValue: null,
						totalSales: 876
					}]
				}],
				contentValue: '',
				showUpChoosePopup: false, //右侧弹窗
				operatyCityList: [{
					operatyName: '全部',
					teadySales: 29,
					contentValue: null,
					totalSales: 876
				}, {
					operatyName: '北京大兴仓',
					teadySales: 29,
					contentValue: null,
					totalSales: 876
				}, {
					operatyName: '北京顺义仓',
					teadySales: 30,
					contentValue: null,
					totalSales: 876
				}],
				operatyCityValue: '全部',
				// ----------------排序-----
				sortedList: ["销量排序", "品名排序"],
				sortedStatusIndex: 0,
				// --------------类目分类---------
				showUpClassPopup: false,
				scrollTop: 0,
				tableForm: {
					hidden: 1,
					parentId: 0,
				},
				categroyData: [{
					name: '',
					sonList: [],
				}],
				selectedCategory: 0, //一级索引，处理分类事件
				secondaryIndex: -1, //二级分类索引
				subValue: {},
				subNameValue: '',
			};
		},
		async onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.dateHandle();
			this.getList();
		},
		computed: {
			visibleItems() {
				return this.isExpanded ? this.businessUnit : this.businessUnit.slice(0, this.visibleItemCount);
			},
			showExpandButton() {
				return this.businessUnit.length > this.visibleItemCount;
			}
		},
		methods: {
			async getList() {
				const res = await getListAllApi(this.tableForm);
				this.categroyData = res.data;
			},
			selectCategory(index) {
				this.selectedCategory = index; //索引
				this.secondaryIndex = -1; //二级索引重置
			}, //二级分类内容

			secondaryCategory(subItem, subIndex) {
				console.log(subItem)
				this.subValue = subItem;
				this.secondaryIndex = subIndex;
				this.subNameValue = this.subValue.name;
				console.log('选择了:', this.subNameValue);
				this.showUpClassPopup = false;
			},
			// 确认类目选择事件
			ComuleClassValue() {
				this.subNameValue = this.subValue.name;
				console.log('选择了:', this.subNameValue);
				this.showUpClassPopup = false;
			},

			invoiceTypeConfirm(ele) {
				let i = ele.detail.value;
			},

			// 销量排序
			sortedStatusConfirm(ele) {
				let i = ele.detail.value;
				this.sortedStatusIndex = i;
				this.sortedStatusShow = false;
			},

			//滚动加载更多
			scrolltolowerFn() {
				this.$refs.tab.scrolltolowerFn();
			},
			changeUpdate() {
				this.showUpDatePopup = true;
			},
			/**
			 * 上下架，关闭选择仓库
			 */
			closeComuleDate() {
				this.showUpDatePopup = false;
				this.showUpChoosePopup = false;
				this.showUpClassPopup = false;
			},
			// 售卖区域确认弹窗
			ComuleDate() {
				let allEmpty = true; // 假设所有元素都为空

				let operatyLists = [];
				for (let item of this.operatyCity) {
					for (let ele of item.operatyList) {
						operatyLists.push(
							ele
						)
					}
				};
				for (let i = 0; i < operatyLists.length; i++) {
					if (operatyLists[i].contentValue !== '' && operatyLists[i].contentValue !== null) {
						allEmpty = false; // 只要有一个不为空，就将 allEmpty 设置为 false
						break
					}
				}
				console.log('operatyLists', operatyLists)
				if (allEmpty) {
					uni.$u.toast('请填写备货产能后再确认');
					return; // 如果全部为空，则直接返回，不再执行后续操作
				}

				this.showUpDatePopup = false;
			},
			tapAttr(skuItem) {
				this.operatyCityValue = skuItem.operatyName;
				this.$set(this, 'operatyCityValue', skuItem.operatyName)
			},
			// 重置事件
			resetBotton() {
				this.operatyCityValue = '全部';
				this.showUpChoosePopup = false;
			},
			// 确认重置筛选事件
			sureFiltrate() {
				console.log(this.operatyCityValue);
				this.showUpChoosePopup = false;
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},

			openDataPicker() {
				this.calendarShow = true;
				this.dateHandle(); //更新日期
			},
			dataClassConfirm(ele) {
				let i = ele.detail.value;
				this.dataClassIndex = i;
				this.calendarShow = false;
			},
			cancelPicker() {
				this.calendarShow = false;
				this.sortedStatusShow = false; // 排序弹窗
			},

			// 获取日期
			dateHandle() {
				let that = this;
				// 获取当前时间
				const now = new Date();

				// 获取今天日期，格式为：月-日
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const today = `${month < 10 ? '0' + month : month}月${day < 10 ? '0' + day : day}日`;
				that.todayTime = today;
				// 获取明天日期，使用 setDate() 函数
				const tomorrow = new Date(now);
				tomorrow.setDate(now.getDate() + 1);
				const month1 = tomorrow.getMonth() + 1;
				const day1 = tomorrow.getDate();
				const tomorrow1 = `${month1 < 10 ? '0' + month1 : month1}月${day1 < 10 ? '0' + day1 : day1}日`;
				that.tomorrowTime = tomorrow1;

				let dataUpList = [];
				dataUpList.push({
					name: `${today}` + ' ' + '配送',
					index: 1,
				}, {
					name: `${tomorrow1}` + ' ' + '配送',
					index: 2,
				});
				this.dataUpList = dataUpList;
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}


	page {
		display: flex;
		height: 100%;
		flex-direction: column;
		overflow: hidden;

		.container {
			display: flex;
			height: 100%;
			flex-direction: column;
			overflow: hidden;
		}

		// 头部内容
		.print_header {
			background-color: white;
			// padding: 0px 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			// height: 110px;

			.header_card {
				margin: 20rpx;
				background-color: #f7f7f7;
				border-radius: 10rpx;
				padding: 30rpx;
			}

		}

		// 内容为空
		.empty {
			flex: 1;
			height: 100%;
		}

		// 备货列表
		.print_center {
			// margin-top: 10px;
			// background-color: white;
			flex: 1;
			overflow: scroll;

			.checke_list {
				// width: 100%;
				margin: 20rpx;

				.checke_item {
					display: flex;
					flex-direction: column;
					// justify-content: space-around;
					// align-items: center;
					background-color: white;
					padding: 20px;
					margin-top: 10px;
					width: 100%;
					border-radius: 20rpx;

					.item_top {
						display: flex;
						// justify-content: space-around;
						align-items: center;

						.item_img {
							margin-right: 10px;

							image {
								width: 50px;
								height: 70px;
							}

						}

						.item_right {
							font-weight: bold;
							line-height: 20px;
						}
					}

					.item_bottom {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.counter {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100px;
							height: 30px;
							border: 1px solid #ccc;
							border-radius: 5px;
							overflow: hidden;
						}

						.counter text {
							width: 40px;
							height: 30px;
							text-align: center;
							line-height: 30px;
							font-size: 16px;
							color: #333;
						}
					}
				}
			}
		}
	}

	.ensure {
		width: 100%;
		// background-color: #fff;
		background-color: #f8f5f8;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bold;
			// background-color: #FFF;
			color: #282828;
			text-align: center;
			// margin: 38rpx 0 36rpx 0;
			padding: 30rpx 0 30rpx 0;
			position: relative;
			// margin: 10rpx;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}

		.classTitle {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			padding: 30rpx 0 30rpx 0;
			position: relative;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
			}
		}
	}

	.rightPopup {
		width: 100%;
		height: 99%;
		// background-color: #fff;
		background-color: #fffeff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 32rpx;
			font-weight: bolder;
			color: #282828;
			text-align: start;
			// margin: 38rpx 0 36rpx 0;
			padding: 38rpx 0 36rpx 0;
			position: relative;
			margin: 16rpx;
			border-bottom: 1px solid #fff;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 38rpx;
				color: #ccc;
				font-size: 28rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 38rpx;
				font-size: 32rpx;
				@include main_color(theme);
			}
		}
	}

	.scroll-Y {
		height: 900rpx;
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}

	.sku-select {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			// line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 16rpx 30rpx;
			font-size: 26rpx;
			font-weight: bolder;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}

	.title-bottom {
		display: flex;
		justify-content: space-between;
	}

	.bottom-button {
		// width: 45%;
		flex: 1;
	}

	/* 分类 */
	.categories {
		flex: 1;
		min-height: 400rpx;
		display: flex;
	}

	/* 一级分类 */
	.primary {
		overflow: hidden;
		width: 330rpx;
		height: 900rpx;
		flex: none;
		background-color: #fbf8fb;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 30rpx;
			color: #595c63;
			padding: 16rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 330rpx;
				// border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fffeff;
			@include main_color(theme);

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 100%;
				@include main_bg_color(theme);
			}
		}
	}

	.primary .item:last-child::after,
	.primary .active::after {
		display: none;
	}

	/* 二级分类 */
	.secondary {
		background-color: #fffeff;
		// height: 100%;
		min-height: 845rpx;
		height: 900rpx;
		// .carousel {
		// 	height: 200rpx;
		// 	margin: 0 30rpx 20rpx;
		// 	border-radius: 4rpx;
		// 	overflow: hidden;
		// }

		.panel {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 330rpx;
				border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fffeff;
			@include main_color(theme);

			// &::before {
			// 	content: '';
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	width: 8rpx;
			// 	height: 100%;
			// 	@include main_bg_color(theme);
			// }
		}
	}
</style>